<template>
    <div>
    <el-form ref="form" :rules="rules" :model="form" label-width="120px" style="width:650px">
      <el-form-item label="电影院名称">
        <el-input v-model="form.cinema_name" type="text"  prop="cinema_name"></el-input>
      </el-form-item>
      <el-form-item label="选择位置">
        <div id="main" style="height:200px; border:1px solid #666;">
        </div>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address" type="text"></el-input>
      </el-form-item>
      <el-form-item label="省份" prop="province">
        <el-input v-model="form.province" type="text"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="form.city" type="text"></el-input>
      </el-form-item>
      <el-form-item label="地区" prop="district">
        <el-input v-model="form.district" type="text"></el-input>
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <el-input v-model="form.longitude" type="text"></el-input>
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input v-model="form.latitude" type="text"></el-input>
      </el-form-item>
      <el-form-item label="选择标签" prop="tags">
        <el-select style="width:100%" v-model="form.tags" multiple>
          <el-option
          v-for="item in tags"
          :key="item.id" 
          :label="item.tagname" :value="item.tagname"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">新增电影院</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import httpApi from '@/http'
    export default {
        data() {
            return {

                tags:[],   // 保存所有的电影院标签数组
                form:{
                    cinema_name:'',
                    address:"",
                    province:'',
                    city:'',
                    district:'',
                    longitude:'',
                    latitude:'',
                    tags:[],
                },
                 rules: {
                  cinema_name:[{required:true, message:'该字段不能为空', trigger:'blur'}],
                  address:[{required:true, message:'该字段不能为空', trigger:'blur'}],
                  province:[{required:true, message:'该字段不能为空', trigger:'blur'}],
                  city:[{required:true, message:'该字段不能为空', trigger:'blur'}],
                  district:[{required:true, message:'该字段不能为空', trigger:'blur'}],
                  longitude:[{required:true, message:'该字段不能为空', trigger:'blur'}],
                  latitude:[{required:true, message:'该字段不能为空', trigger:'blur'}],
                  tags:[{required:true, message:'该字段不能为空', trigger:'change'}],
      }
            }
        },
        methods:{

          //表单数据提交
          submit(){
           this.form.tags = this.form.tags.join(' / ')
            this.$refs['form'].validate(valid=>{
              if(valid){
                // 发送请求，添加电影院信息
                httpApi.cinemaApi.add(this.form).then(res=>{
                  console.log('新增电影院', res)
                  if(res.data.code==200){
                    this.$message.success('恭喜，影院开业大吉！')
                    this.$router.push('/home/cinema-list')
                  }
                })
              }
            })
          
          },
    initMap(){
        AMapLoader.load({
          
            key:"17036be2d5ab1ea47f3f47baa1f38de2",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:['AMap.Geocoder'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("main",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:12,           //初始化地图级别
                center:[116.397455,39.909187], //初始化地图中心点位置
            });
            // 为地图对象绑定点击事件
            this.map.on('click',(e)=>{
                let lng = e.lnglat.getLng()
                let lat = e.lnglat.getLat()
                console.log(`'经纬度:'[${lng}],[${lat}]`)
                // 调用高德地图的web服务接口，查询当前纬度的坐标
                var geocoder = new AMap.Geocoder()
                geocoder.getAddress([lng,lat], (status, result)=> {
                    console.log(status,result)
                    let info =result.regeocode.addressComponent
                    this.form.address=result.regeocode.formattedAddress
                    this.form.city=info.city
                    this.form.province=info.province
                    this.form.district=info.district
                    this.form.latitude=lat
                    this.form.longitude=lng
                })
            })
        }).catch(e=>{
            console.log(e);
        })
    },
},
mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap();
    // 初始化电影标签选择器 select的option列表
    httpApi.cinemaApi.queryTypes().then(res=>{
      console.log('加载电影标签列表',res)
      this.tags=res.data.data
    })
}
    }
</script>

<style lang="scss" scoped>

</style>